<template>
  <div class="box_yj sectionss" ref="parent">
    <span></span>
    <div class="section-header">出台热门政策TOP10</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getPolicyNewPolicyTop5 } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      data: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      this.jz=false
      getPolicyNewPolicyTop5(this.dateProp)
      .then(({data:{data}})=>{
        // this.jz=true
        // if(data&&data.length>0){
        //   this.data = data;
        //   this.drawChart();
        // }else{
        //   this.data = null;
        // }
      })
    },
    drawChart() {
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '占比',
                  type: 'pie',
                  radius: ['35%','55%'],
                  center: ['50%', '50%'],
                  data: this.data,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  },
                  color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#32c5e9','#37a2da'],
              }
          ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>